<!--
 * @Author: PoJun
 * @Date: 2024-06-25 11:15:07
 * @LastEditors: PoJun
 * @LastEditTime: 2024-07-09 11:44:36
 * @Message: 暂定分3个页面, 首页、详情、滚动列表
-->
<template>
  <view class="wallpaper" :style="[vuex_theme]">
    <uv-navbar
      :placeholder="true"
      title=" "
      @leftClick="customNavbarBack"
      bgColor="transparent"
      titleWidth="auto"
      :fiexd="true"
      leftIconColor="#fff"
    ></uv-navbar>

    <!-- 我也不晓得有哪些分类, 毕竟接口都没得, 假数据先随便写几个 ? -->
    <uv-row gutter="10">
      <uv-col :span="4" v-for="(item, index) in items" :key="index">
        <view class="wallpaper-item">
          <!-- 没找到封面图. 只能用个背景了, 哎 -->
          <view @tap="openDetails(item)" class="wallpaper-item-title">{{ item.name }}</view>
        </view>
      </uv-col>
    </uv-row>
  </view>
</template>

<script>
import { imageClassification } from "@/common/apis/image"
import commonFuncMixin from "@/utils/commonFuncMixin.js"
export default {
  mixins: [commonFuncMixin],
  data() {
    return {
      items: []
    }
  },
  methods: {
    openDetails({ id, name }) {
      uni.$uv.route({
        url: "/subpages/imageDep/detail/detail",
        params: {
          name,
          id
        }
      })
    },
    async initPageList() {
      const res = await imageClassification()

      this.items = res?.data || []
    }
  },
  onLoad() {
    this.initPageList()
  }
}
</script>

<style lang="scss" scoped>
.wallpaper {
  height: 100vh;
  padding: 0 25rpx;

  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;

  @keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    to {
      background-position: 0 50%;
    }
  }

  ::v-deep .uv-row {
    flex-wrap: wrap;
  }
  &-item {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 25rpx;
    &-title {
      padding: 20px 0;
    }
  }
}
</style>
